<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="用户名" prop="phoneNumber" :label-width="formLabelWidth" :error="error.phoneNumber">
    <el-input v-model="ruleForm.phoneNumber" auto-complete="off" placeholder="请输入用户名/手机号"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password" :label-width="formLabelWidth" :error="error.password">
    <el-input v-model="ruleForm.password" type="password"  auto-complete="off" placeholder="请输入密码" @keypress.native.enter="submitForm('ruleForm')"></el-input>
  </el-form-item>
  <!-- <el-form-item label="验证码" prop="vcode" :label-width="formLabelWidth">
    <el-col :span="12" >
        <el-input v-model="ruleForm.vcode"  auto-complete="off" placeholder="请输入验证码"></el-input>
    </el-col>
    <el-col :span="10" :offset="2">
        security code
    </el-col>
  </el-form-item> -->
  <el-form-item :label-width="formLabelWidth">
    <el-checkbox v-model="ruleForm.checked">记住密码</el-checkbox>
    <!-- <router-link class="fr" to="/reset-password">忘记密码？</router-link> -->
  </el-form-item>
  <el-form-item :label-width="formLabelWidth">
    <el-col :span="10">
						<a href="javascript:;" class="common-main-button"  @click="submitForm('ruleForm')">登录</a>
    </el-col>
    <el-col :span="10">
      <router-link to="/register">
        <a href="javascript:;"  class="common-sub-button">没有账号？</a>
      </router-link>
    </el-col>
  </el-form-item>
  <loading :propShow="loading"></loading>
</el-form>
</template>

<script>
import Loading from '../components/Loading'
import {requestLogin, PLATFORM_PREFIX, commonAjax} from '../api/api'
import md5 from 'md5'
export default {
  data () {
    return {
      loading: false,
      formLabelWidth: '80px',
      ruleForm: {
        phoneNumber: localStorage.phoneNumber || '',
        password: localStorage.password || '',
        checked: localStorage.password !== undefined
      },
      rules: {
        phoneNumber: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
        password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
      },
      error: {
        phoneNumber: '',
        password: ''
      },
      loginArr: [
        {phoneNumber: 'admin', pwd: '123456', personName: 'admin'}
      ]
    }
  },
  components: {Loading},
  mounted () {
    if (localStorage.getItem('myLoginArr')) {
      this.loginArr = JSON.parse(localStorage.getItem('myLoginArr'))
    } else {
      localStorage.setItem('myLoginArr', JSON.stringify(this.loginArr))
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return false
        // 记住密码
        // console.log(this.ruleForm.password)
        this.error.phoneNumber = ''
        this.error.password = ''
        let params = {
          loginName: this.ruleForm.phoneNumber,
          pwd: md5(this.ruleForm.password),
          forAccessToken: true,
          rid: 'patient'
        }
        // console.log(params)
        // 登录入口
        // this.loading = true
        var canLogin = false
        var curEle = {}
        for (let i = 0; i < this.loginArr.length; i++) {
          const element = this.loginArr[i]
          if (element.phoneNumber == this.ruleForm.phoneNumber  && this.ruleForm.password == element.pwd){
            canLogin = true
            curEle = element
          }
        }
        if (canLogin) {
          localStorage.phoneNumber = this.ruleForm.phoneNumber
          localStorage.removeItem('person')
          if (this.ruleForm.checked) {
            localStorage.password = this.ruleForm.password
          } else {
            localStorage.removeItem('password')
          }
          localStorage.accessToken = 222
          localStorage.person = localStorage.familyPerson = JSON.stringify(curEle)
          this.$router.push('/')
          setTimeout(() => location.reload(), 100)
        } else {
          this.$message.error('用户名或密码错误!')
        }
        // requestLogin(params).then(d => {
        //   this.loading = false
        //   if (d.data.code === 200) {
        //     localStorage.phoneNumber = this.ruleForm.phoneNumber
        //     localStorage.accessToken = d.data.properties.accessToken
        //     localStorage.removeItem('person')
        //     if (this.ruleForm.checked) {
        //       localStorage.password = this.ruleForm.password
        //     } else {
        //       localStorage.removeItem('password')
        //     }
        //     // 验证身份信息
        //     this.loading = true

        //     commonAjax([], `${PLATFORM_PREFIX}.appService`, 'index').then(res => {
        //       this.loading = false
        //       if (res.data.code === 200 && res.data.body.person) {
        //         // 通过身份验证
        //         localStorage.person = localStorage.familyPerson = JSON.stringify(res.data.body.person)
        //         this.$router.push('/')
        //         // this.$router.push(this.$route.query.redirect || '/index')
        //       } else {
        //         this.$message({
        //           message: '您的身份信息不完善，请先完善信息',
        //           type: 'warning'
        //         })
        //         this.$router.push('/personal?from=login')
        //       }
        //       setTimeout(() => location.reload(), 400)
        //     })
        //   } else if (d.data.code === 404) {
        //     this.error.phoneNumber = '用户名不存在，请检查用户名'
        //   } else if (d.data.code === 501) {
        //     this.error.password = '密码不正确，请检查密码'
        //   } else {
        //     this.$message.error(d.data.msg)
        //   }
        // }).catch(res => {
        //   this.loading = false
        //   this.$message({
        //     message: '连接服务端失败',
        //     type: 'error'
        //   })
        //   console.warn(res)
        // })
      })
    }
  }
}
</script>

<style lang="less">
@import '../common/css/vars.less';
// 通用灯登录框
.login-form {
  background: url(../assets/login_bg_old.png) no-repeat;
  width: 640px;
  height: 438px;
  .el-dialog__body {
    padding: 100px 140px 20px 100px;
  }
  .el-dialog__headerbtn {
    display: none;
  }
}
</style>
